<template>
  <div class="extend-configuration">
    <je-form-item :label="$t('extendConfiguration.canSponsor')" name="canSponsor">
      <je-switch v-model:value="formState.canSponsor" mode="checkbox" />
      <span class="prompt">{{ $t('extendConfiguration.canSponsorContext') }}</span>
    </je-form-item>

    <je-form-item :label="$t('extendConfiguration.canRetrieve')" name="canRetrieve">
      <je-switch v-model:value="formState.canRetrieve" mode="checkbox" />
      <span class="prompt">{{ $t('extendConfiguration.canRetrieveContext') }}</span>
    </je-form-item>

    <je-form-item :label="$t('extendConfiguration.canReturn')" name="canReturn">
      <je-switch v-model:value="formState.canReturn" mode="checkbox" />
      <span class="prompt">{{ $t('extendConfiguration.canReturnContext') }}</span>
    </je-form-item>

    <je-form-item :label="$t('extendConfiguration.canUrged')" name="canUrged">
      <je-switch v-model:value="formState.canUrged" mode="checkbox" />
      <span class="prompt">{{ $t('extendConfiguration.canUrgedContext') }}</span>
    </je-form-item>

    <je-form-item :label="$t('extendConfiguration.canCancel')" name="canCancel">
      <je-switch v-model:value="formState.canCancel" mode="checkbox" />
      <span class="prompt">{{ $t('extendConfiguration.canCancelContext') }}</span>
    </je-form-item>

    <je-form-item :label="$t('extendConfiguration.canInvalid')" name="canInvalid">
      <je-switch v-model:value="formState.canInvalid" mode="checkbox" />
      <span class="prompt">{{ $t('extendConfiguration.canInvalidContext') }}</span>
    </je-form-item>

    <je-form-item :label="$t('extendConfiguration.canTransfer')" name="canTransfer">
      <je-switch v-model:value="formState.canTransfer" mode="checkbox" />
      <span class="prompt">{{ $t('extendConfiguration.canTransferContext') }}</span>
    </je-form-item>

    <je-form-item :label="$t('extendConfiguration.canDelegate')" name="canDelegate">
      <je-switch v-model:value="formState.canDelegate" mode="checkbox" />
      <span class="prompt">{{ $t('extendConfiguration.canDelegateContext') }}</span>
    </je-form-item>

    <!-- <je-form-item :label="$t('extendConfiguration.canHang')">
      <je-checkbox v-model:checked="formState.canHang">
        <span class="prompt">{{ $t('extendConfiguration.canHangContext') }}</span>
      </je-checkbox>
    </je-form-item> -->

    <!-- <je-form-item :label="$t('extendConfiguration.easyLaunch')" name="easyLaunch">
      <je-switch v-model:value="formState.easyLaunch" mode="checkbox" />
      <span class="prompt">{{ $t('extendConfiguration.easyLaunchContext') }}</span>
    </je-form-item>

    <je-form-item :label="$t('extendConfiguration.easyApproval')" name="simpleApproval">
      <je-switch v-model:value="formState.simpleApproval" mode="checkbox" />
      <span class="prompt">{{ $t('extendConfiguration.easyApprovalContext') }}</span>
    </je-form-item>

    <je-form-item :label="$t('extendConfiguration.examineRecord')">
      <je-switch v-model:value="formState.hideStateInfo" mode="checkbox" />
      {{ $t('extendConfiguration.hideStateInfo') }}
      <je-switch v-model:value="formState.hideTimeInfo" mode="checkbox" />
      {{ $t('extendConfiguration.hideTimeInfo') }}
    </je-form-item> -->
  </div>
</template>

<script>
  import { defineComponent, ref, watch } from 'vue';
  import { Form, Switch } from '@jecloud/ui';

  export default defineComponent({
    name: 'ExtendConfiguration',
    components: {
      JeFormItem: Form.Item,
      JeSwitch: Switch,
    },
    props: {
      extendedConfiguration: {
        type: Object,
        default: () => {
          return {};
        },
      },
      wfId: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      //表单数据
      const formState = ref(props.extendedConfiguration);

      //主数据改变刷新数据
      watch(
        () => props.wfId,
        () => {
          formState.value = props.extendedConfiguration;
        },
        { deep: true },
      );

      return { formState };
    },
  });
</script>
